<template>
  <view class="mask" @touchmove.stop.prevent @click="cancel">
    <view class="time_select" @click.stop="">
      <view class="time_select-head">
        <view @click="closed" class="head-line"></view>
      </view>

      <view class="titles">
        <view class="titles-text">选择日期</view>
        <view class="titles-choose">
          已选：
          <text v-if="selectTime">{{ selectTime | formatDisplayTime(model, time) }}</text>
          <text v-else :style="{color: '#ccc'}">请选择</text>
        </view>
      </view>
      <view class="model-list" v-if="showModelList">
        <view :class="{'active':model===item.type}" class="model-item" @click="handleChangeModel(item)" v-for="item in modelList" :key="item.type">{{ item.name }}</view>
      </view>
      <view class="date-head">
        <view class="month-index" v-if="(model === 'date' || model === 'week') && monthList.length">
          {{ scrollYear }} </view>
        <view class="month-index" v-if="(model === 'month') && yearList.length">
          {{ yearScrollYear }} </view>
        <view class="weeks" v-if="model === 'date' || model === 'week'">
          <view class="weeks-item" v-for="data in weekList" :key="data">{{ data }}</view>
        </view>
      </view>
      <scroll-view :refresher-enabled="true" :refresher-triggered="navLoading" @refresherrefresh="scrollTop"
                   :enable-passive="true" :enhanced="true" :bounces="false" :scroll-top="scrollTopNum" @scroll="scrollEvent"
                   :scroll-anchoring="true" @scrolltolower="scrollDown" :scroll-y="true" class="time_select-container" :style="{height:showModelList?`calc(100% - 150rpx - 90rpx - 130rpx - 70rpx)`:`calc(100% - 150rpx - 90rpx - 130rpx)`}">
        <!-- <view class="loading" v-if="loading">加载中...</view> -->
        <template v-if="model === 'date' || model === 'week'">
          <view class="month-item" :id="monthdata.key" v-for="monthdata in monthList" :key="monthdata.key">
            <view class="month-index">{{
                monthdata.year
              }}年{{ monthdata.month > 9 ? monthdata.month : '0' + monthdata.month }}月</view>
            <view class="date-list">
              <view v-for="(data, index) in monthdata.months" :key="index"
                    style="width:100%;justify-content: space-between; display: flex; margin: 0 0 6rpx 0; ">
                <view v-for="(item, idx) of data" :key="idx"
                      :class="include(monthdata.year, monthdata.month, item.date) ? (model === 'week' ? 'date-column-include-week' : 'date-column-include') : 'date-column'"
                      @click="select(item, monthdata.year, monthdata.month)">
                  <!-- <view class="left"></view> -->
                  <view class="right" :class="{'bg_active' : model === 'week'}" v-if="model=== 'date' && show && time.length === 2 && isActive(item.date, monthdata.year, monthdata.month)"
                        :style="['right: 0;', 'left:0;'][showBorder(item.date, monthdata.year, monthdata.month)]">
                  </view>
                  <!-- <view
                    :class="isActive(item.date, monthdata.year, monthdata.month) ? 'date-column-active-date' : 'date-column-date'"
                    :style="item.outToday && !beforeToday ? 'color:#ccc' : ''">
                    <text :style="item.today ? 'color:#ff5500' : ''">{{ item.date }}</text>
                  </view> -->
                  <view
                      :class="{
										'date-column-date':!isActive(item.date, monthdata.year, monthdata.month),
										'date-column-active-date':isActive(item.date, monthdata.year, monthdata.month),
										'date-column-colors':item.outToday && !atterToday && beforeToday,
										'date-column-colors':item.woutToday && !beforeToday && atterToday,
									}"
                  >
                    <text :style="(model === 'date' && !isActive(item.date, monthdata.year, monthdata.month) || (model === 'week' && !include(monthdata.year, monthdata.month, item.date))) && item.today ? 'color:#ff5500' : ''">{{ item.date }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else-if="model === 'month'">
          <view class="month-item" :id="yearData.id" v-for="yearData in yearList" :key="yearData.id">
            <view class="month-index">{{ yearData.year }}年</view>
            <view class="date-list month-list">
              <view class="month-list-item" v-for="m in 12" :key="`${yearData.year}_${m}`">
                <view class="month-right" v-if="isMonthActive(m+1,yearData) && time.length === 2 && !isSameMonthSelected()"
                      :style="['right: 0;','left:0;'][isMonthRangeActive(m+1,yearData)]">
                </view>
                <view class="month-item-text" @click="handleMonthClick(m+1,yearData)" :class="[
                  isMonthActive(m+1,yearData) ? 'active-month-item' : '',
                  isMonthInRange(m+1,yearData) ? 'month-in-range' : '',
                  isCurrentMonth(m+1,yearData) ? 'current-month' : ''
                ]">
                  <text>{{ m + 1 }}月</text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <template v-else-if="model === 'year'">
          <view class="month-item">
            <view class="date-list month-list year-list">
              <view class="month-list-item year-list-item" :id="yearData.id" v-for="yearData in yearList"
                    :key="yearData.id">
                <view class="month-item-text year-item-text" @click="handleYearClick(yearData.year)" :class="[
                  isYearActive(yearData.year) ? 'active-year-item' : '',
                  isYearInRange(yearData.year) ? 'year-in-range' : '',
                  isCurrentYear(yearData.year) ? 'current-year' : ''
                ]">
                  <text>{{ yearData.year }}</text>
                </view>
              </view>
            </view>
          </view>
        </template>
        <view class="loading" :style="loading ? '' : 'color:#fff'">加载中...</view>
      </scroll-view>
      <view class="btns">
        <view class="btns-item" @click="resSet()">
          <view>重置</view>
        </view>
        <view class="btns-item" @click="confirm()">
          <view>确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import {formatTime} from '@/utils/utils.js';

export default {
	props: {
		// 是否可以切换日周月年
		showModelList: {
			type: Boolean,
			default: true
		},
		loadMonth: {
			type: Number,
			default: 3
		},
		// 是否可以选择今天以前的值
		beforeToday: {
			type: Boolean,
			default: false
		},
		// 是否可以选择今天以后的值
		atterToday: {
			type: Boolean,
			default: false
		},
		name: String,
		defTime: {
			type: Array,
			default: () => []
		},
		// 是否可以选择今天
		isChooseToday: {
			type: Boolean,
			default: false
		},
		singStatus: {// 单次选择
			type: Boolean,
			default: false
		},
		// 新增：默认模式
		defaultModel: {
			type: String,
			default: 'date'
		},
		// 新增：默认选中的时间数组
		defaultSelectTime: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			model: 'date',
			modelList: [{
				name: '日',
				type: 'date'
			}, {
				name: '周',
				type: 'week'
			}, {
				name: '月',
				type: 'month'
			}, {
				name: '年',
				type: 'year'
			}],
			scrollYear: '',
			scrollIndex: 0,
			yearScrollYear: '',
			yearScrollIndex: 0,
			navLoading: false,
			loading: false,
			selectTime: '',
			weekList: ['一', '二', '三', '四', '五', '六', '日'],
			Month: [],
			dateList: [],
			time: [],
			month: 0,
			year: 0,
			show: false,
			nowData: {
				year: 0,
				month: 0,
				day: 0
			},
			monthList: [],
			yearList: [],
			scrollTopNum: 0,
			scrollFlag: true
		};
	},
	filters: {
		// 格式化显示时间的过滤器
		formatDisplayTime(selectTime, model, time) {
			if (!selectTime || !time || time.length === 0) return '';

			// 获取日期对象
			const startDate = new Date(time[0]);
			const endDate = time.length > 1 ? new Date(time[1]) : startDate;

			// 根据不同模式格式化显示
			if (model === 'date' || model === 'week') {
				// 日期和周模式: YYYY-MM-DD至YYYY-MM-DD 或 YYYY-MM-DD
				const startStr = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;

				if (time.length === 1 || (time.length === 2 && time[0] === time[1])) {
					return startStr;
				} else {
					const endStr = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
					return `${startStr}至${endStr}`;
				}
			} else if (model === 'month') {
				// 月份模式: YYYY-MM至YYYY-MM 或 YYYY-MM
				const startStr = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}`;

				if (time.length === 1 || (startDate.getFullYear() === endDate.getFullYear() && startDate.getMonth() === endDate.getMonth())) {
					return startStr;
				} else {
					const endStr = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}`;
					return `${startStr}至${endStr}`;
				}
			} else if (model === 'year') {
				// 年份模式: YYYY，YYYY 或 YYYY
				const startYear = startDate.getFullYear();

				if (time.length === 1 || startDate.getFullYear() === endDate.getFullYear()) {
					return `${startYear}`;
				} else {
					const endYear = endDate.getFullYear();
					return `${startYear}，${endYear}`;
				}
			}

			// 默认返回原始格式
			return selectTime;
		},
	},
	watch: {
		scrollTopNum() {
			console.log('watch-scrollTopNum', this.scrollTopNum);
		},
		// 新增：监听默认模式变化
		defaultModel: {
			handler(newVal) {
				if (newVal) {
					this.model = newVal;
					this.handleChangeModel({ type: newVal });
				}
			},
			immediate: true
		},
		// 新增：监听默认选中时间变化
		defaultSelectTime: {
			handler(newVal) {
				if (newVal && newVal.length === 2) {
					this.handleDefaultSelectTime(newVal);
				}
			},
			immediate: true
		}
	},
	components: {
		uniPopup
	},
	mounted() {
		this.initDate();
		this.yearList = this.generateYearList(new Date().getFullYear() - 4, new Date().getFullYear() + 4);
	},
	methods: {
		handleChangeModel(item) {
			this.model = item.type;
			this.time = [];
			this.show = false;
			this.selectTime = '';
			
			// 获取当前日期
			const now = new Date();
			const currentYear = now.getFullYear();
			const currentMonth = now.getMonth() + 1;
			const currentDay = now.getDate();
			
			// 根据不同的模式设置默认选中
			if (item.type === 'date') {
				// 日模式：模拟点击当前日期
				const currentDateData = {
					date: currentDay,
					currentMonth: true,
					outToday: false,
					woutToday: false,
					today: true
				};
				this.select(currentDateData, currentYear, currentMonth);
			} else if (item.type === 'week') {
				// 周模式：模拟点击当前日期
				const currentDateData = {
					date: currentDay,
					currentMonth: true,
					outToday: false,
					woutToday: false,
					today: true
				};
				this.select(currentDateData, currentYear, currentMonth);
			} else if (item.type === 'month') {
				// 月模式：模拟点击当前月份
				this.handleMonthClick(currentMonth, { year: currentYear });
			} else if (item.type === 'year') {
				// 年模式：模拟点击当前年份
				this.handleYearClick(currentYear);
			}

			if (item.type === 'month') {
				this.$nextTick(() => {
					const currentYear = new Date().getFullYear();
					// 计算当前年在年份列表中的位置
					let top = 0;
					for (let i = 0; i < this.yearList.length; i++) {
						if (this.yearList[i].year === currentYear) {
							this.yearScrollIndex = i;
							this.yearScrollYear = currentYear + '年';
							break;
						}
						top += this.yearList[i].height;
					}
					// 设置滚动位置
					this.scrollTopNum = top > 60 ? top + 60 : 0;
				});
			}
		},
		scrollEvent(res) {
			if (this.model === 'date' || this.model === 'week') {
				this.scrollDateEvent(res);
			} else if (this.model === 'month' || this.model === 'year') {
				// 月份和年份选择滚动事件
				this.scrollMonthEvent(res);
			}
		},
		scrollDateEvent(res) {
			let scrollTopNum = res.detail.scrollTop + 100;
			for (let i = 0; i < this.monthList.length; i++) {
				scrollTopNum = scrollTopNum - this.monthList[i].height;
				if (scrollTopNum <= 0 || i == this.monthList.length - 1) {
					this.scrollIndex = i;
					this.scrollYear = this.monthList[this.scrollIndex].year + '年' + this.monthList[this.scrollIndex].month + '月';
					break;
				}
			}
		},
		scrollMonthEvent(res) {
			let scrollTopNum = res.detail.scrollTop + 100;
			for (let i = 0; i < this.yearList.length; i++) {
				scrollTopNum = scrollTopNum - this.yearList[i].height;
				if (scrollTopNum <= 0 || i == this.yearList.length - 1) {
					this.yearScrollIndex = i;
					this.yearScrollYear = this.yearList[this.yearScrollIndex].year + '年';
					break;
				}
			}
		},
		// 触顶
		scrollTop() {
			if (this.navLoading) {
				return;
			}
			this.navLoading = true;
			console.log('触顶');

			if (this.model === 'date' || this.model === 'week') {
				if (this.monthList.length === 0) return;
				this.addMonthList(this.monthList[0].year - 1, -1);
			} else if (this.model === 'month' || this.model === 'year') {
				if (this.yearList.length === 0) return;
				this.addYearList(this.yearList[0].year - this.loadMonth, -1);
			}
		},
		// 触底
		scrollDown() {
			if (this.loading) {
				return;
			}
			console.log('触底');

			this.loading = true;
			this.$nextTick(() => {
				if (this.model === 'date' || this.model === 'week') {
					this.addMonthList(Number(this.monthList[this.monthList.length - 1].year) + 1, 1);
				} else if (this.model === 'month' || this.model === 'year') {
					this.addYearList(Number(this.yearList[this.yearList.length - 1].year) + 1, 1);
				}
			});
		},
		// 渲染日期之间的天数格子
		include(year, month, val) {
			if (val != '') {
				let date = new Date(year + '/' + (month > 9 ? month : '0' + month) + '/' + val).getTime();

				if (this.model === 'week') {
					if (this.time.length === 2) {
						// 高亮整个范围
						return date >= this.time[0] && date <= this.time[1];
					}
					return false;
				} else if (this.time.length == 2) {
					// 其他模式，保持原有逻辑
					return date > this.time[0] && date < this.time[1];
				}
			}
			return false;
		},
		// 判断日期是否被选中
		isActive(val, year, month) {
			if (val != '') {
				let date = new Date(year + '/' + month + '/' + val);
				if (this.time.length == 2) {
					this.show = true;
				}
				return this.time.indexOf(date.getTime()) != -1;
			}
			return false;
		},
		// 判断日期是否是范围的开始或结束点
		showBorder(val, year, month) {
			let date = new Date(year + '/' + month + '/' + val);
			return this.time.indexOf(date.getTime());
		},
		// 加载月份分页  lag: 0(初始化)  1（上一页） -1(下一页)
		loadMonthFuc(lag) {
			let num = this.loadMonth;
			if (lag == 0) {
				this.scrollTopNum = 0;
				// 初始化
				let now = new Date();
				let y = now.getFullYear();
				let m = now.getMonth() + 1;
				let list = [];
				let top = 0;

				for (let i = 1 - num; i <= 0; i++) {
					let ms = (m + i < 1 ? m + 12 + i : m + i);
					let its = {
						key: 'id' + (m + i < 1 ? y - 1 : y) + '' + (ms >= 10 ? ms : '0' + '' + ms),
						year: (m + i < 1 ? y - 1 : y),
						month: ms,
						months: this.getDate((m + i < 1 ? y - 1 : y), ms)
					};
					its.height = its.months.length * 43 + 7 + 20 + 20;
					if (i != 0) {
						top = top + its.height;
					}

					list.push(its);
				}
				let its = {
					key: 'id' + (m + 1 > 12 ? y + 1 : y) + '' + (m + 1 > 12 ? m - 12 + 1 : m + 1),
					year: (m + 1 > 12 ? y + 1 : y),
					month: (m + 1 > 12 ? m - 12 + 1 : m + 1),
					months: this.getDate((m + 1 > 12 ? y + 1 : y), (m + 1 > 12 ? m - 12 + 1 : m + 1))
				};
				its.height = its.months.length * 43 + 7 + 20 + 20;
				list.push(its);

				this.monthList = list;
				this.$nextTick(() => {
					this.scrollTopNum = top - 60;
					this.loading = false;
					this.navLoading = false;
				});
				return;
			} else if (lag > 0) {
				// 下一页
				let y = this.monthList[this.monthList.length - 1].year;
				let m = this.monthList[this.monthList.length - 1].month;
				let list = [];
				for (let i = 1; i <= num; i++) {
					let its = {
						key: 'id' + (m + i > 12 ? y + 1 : y) + '' + (m + i > 12 ? m - 12 + i : m + i),
						year: (m + i > 12 ? y + 1 : y),
						month: (m + i > 12 ? m - 12 + i : m + i),
						months: this.getDate((m + i > 12 ? y + 1 : y), (m + i > 12 ? m - 12 + i : m + i))
					};
					its.height = its.months.length * 43 + 7 + 20 + 20;
					list.push(its);
				}
				this.monthList.push(...list);
				this.loading = false;
				return;
			} else if (lag < 0) {
				this.scrollTopNum = 0;
				// 上一页
				let y = this.monthList[0].year;
				let m = this.monthList[0].month;
				let top = 0;
				let list = [];
				for (let i = 0 - num; i < 0; i++) {
					let ms = (m + i < 1 ? m + 12 + i : m + i);
					let its = {
						key: 'id' + (m + i < 1 ? y - 1 : y) + '' + (ms >= 10 ? ms : '0' + '' + ms),
						year: (m + i < 1 ? y - 1 : y),
						month: ms,
						months: this.getDate((m + i < 1 ? y - 1 : y), ms)
					};
					its.height = its.months.length * 43 + 7 + 20 + 20;
					top = top + its.height;
					list.push(its);
				}
				this.monthList.unshift(...list);
				this.$nextTick(() => {
					this.scrollTopNum = top;
					this.navLoading = false;
				});
				return;
			}
			this.loading = false;
		},
		generateYearList(startYear, endYear) {
			const yearList = [];
			for (let year = startYear; year <= endYear; year++) {
				yearList.push({
					id: 'id' + year,
					year,
					height: 200
				});
			}
			return yearList;
		},
		// 获取月份数组
		addMonthList(year, yearIndex) {
			console.log('/获取月份数组');
			this.loadMonthFuc(yearIndex);
			return;
		},

		// 计算每个月的天数以及显示
		getDate(year, month) {
			let week = [];
			let Month = [];
			var nowDate = new Date(year, month, 0);

			let currentYear = nowDate.getFullYear();
			let nextYear = nowDate.getFullYear() + 1;
			let lastYear = nowDate.getFullYear() - 1;

			let nextDate = new Date(currentYear, nowDate.getMonth() + 1, 0);
			let oldDate = new Date(currentYear, nowDate.getMonth(), 0);

			if (nowDate.getMonth() == 1) {
				nextDate = new Date(currentYear, nowDate.getMonth() + 1, 0);
				oldDate = new Date(lastYear, 11, 0);
			} else if (nowDate.getMonth() == 12) {
				nextDate = new Date(nextYear, 0, 0);
				oldDate = new Date(currentYear, nowDate.getMonth(), 0);
			}

			let lastMonthDay = oldDate.getDate();

			let totalDays = nowDate.getDate();

			let monthHead = new Date(nowDate.setDate(1)).getDay() - 1 == -1 ? 6 : new Date(nowDate.setDate(1)).getDay() - 1;
			let monthTail = 7 - new Date(nowDate.setDate(totalDays)).getDay();
			// let monthDays=date.getDate()
			//
			for (let count = 1; count <= 7; count++) {
				if (monthHead > 0) {
					week.push({
						date: '',
						currentMonth: false
					});
					monthHead--;
				} else {
					break;
				}
			}
			const addzero = num => {
				return num > 9 ? num : '0' + '' + num;
			};
			const today = this.nowData.year + '' + addzero(this.nowData.month);
			for (let count = 1; totalDays >= count; count++) {
				let out = false;
				let wout = false;
				if (this.isChooseToday) {
					// 可选今天
					if (year + '' + addzero(month) > today) {
						out = true;
					}
					if (year + '' + addzero(month) == today && this.nowData.day < count) {
						out = true;
					}
					if (year + '' + addzero(month) < today) {
						wout = true;
					}
					if (year + '' + addzero(month) == today && this.nowData.day > count) {
						wout = true;
					}
				} else {
					// 不选今天
					if (year + '' + addzero(month) > today) {
						out = true;
					}
					if (year + '' + addzero(month) == today && this.nowData.day <= count) {
						out = true;
					}

					if (year + '' + addzero(month) < today) {
						wout = true;
					}
					if (year + '' + addzero(month) == today && this.nowData.day >= count) {
						wout = true;
					}
				}

				week.push({
					date: count,
					currentMonth: true,
					outToday: out, // 是否大于等于今天
					woutToday: wout, //
					today: year == this.nowData.year && month == this.nowData.month && count == this.nowData.day ? true : false
				});
				if (week.length == 7) {
					Month.push(week);
					week = [];
				}
			}
			if (monthTail != 7) {
				for (let count = 1; count <= 7; count++) {
					if (monthTail > 0) {
						week.push({
							date: '',
							currentMonth: false
						});
						monthTail--;
						if (week.length == 7) {
							Month.push(week);
							week = [];
						}
					} else {
						break;
					}
				}
			}
			nowDate = null;
			oldDate = null;
			nextDate = null;
			monthHead = null;
			monthTail = null;
			// this.Month=Month
			return Month;

			// console.log(this.Month);
		},
		// 控制选择逻辑
		select(item, year, month) {
			console.log('select', item, year, month);
			const addzero = num => {
				return num > 9 ? num : '0' + '' + num;
			};
			const today = this.nowData.year + '' + addzero(this.nowData.month);
			let out = false;
			if (this.isChooseToday) {
				// 可选今天
				if (year + '' + addzero(month) > today) {
					out = true;
				}
				if (year + '' + addzero(month) == today && this.nowData.day < item.date) {
					out = true;
				}
			} else {
				// 不选今天
				if (year + '' + addzero(month) > today) {
					out = true;
				}
				if (year + '' + addzero(month) == today && this.nowData.day <= item.date) {
					out = true;
				}
			}
			// console.log('select', out, today, item, this.nowData.year);
			let val = item.date;
			// console.log(item, 6666,this.include( year, month,item.date));
			if (item.today && this.name && this.name.indexOf('achievements') != -1) {
				uni.showToast({
					title: '绩效统计不包括今日~',
					icon: 'none'
				});
				return;
			}

			if (item.outToday && !this.atterToday && this.beforeToday) {
				uni.showToast({
					title: '请选择今天以前的日期',
					icon: 'none'
				});
				return;
			}
			if (item.woutToday && !this.beforeToday && this.atterToday) {
				uni.showToast({
					title: '请选择今天以后的日期',
					icon: 'none'
				});
				return;
			}

			// 以下支持跨月
			if (val != 0) {
				let date = new Date(year + '/' + month + '/' + val);

				if (this.model === 'date') {
					if (this.singStatus) {
						// 单选模式：选择当天作为开始和结束
						const endOfDay = new Date(date);
						endOfDay.setHours(23, 59, 59, 999);
						this.time = [date.getTime(), endOfDay.getTime()];
					} else {
						// 范围选择模式
						if (this.time.length < 2) {
							if (this.time.indexOf(date.getTime()) == -1) {
								this.time.push(date.getTime());
							}
							this.time.sort((a, b) => a - b);
						} else {
							// 如果已经选了两个日期，重新开始选择
							this.time = [date.getTime()];
						}
						if (this.time.length === 2) {
							const startDate = new Date(this.time[0]);
							const endDate = new Date(this.time[1]);
							const yearDiff = endDate.getFullYear() - startDate.getFullYear();

							if (yearDiff > 2 || (yearDiff === 2 && startDate.getDate() < endDate.getDate())) {
								uni.showToast({
									icon: 'none',
									title: '最多不能超出2年',
								});
								// 移除第二个日期，保留第一个
								this.time.pop();
								return;
							}
						}
					}
				} else if (this.model === 'week') {
					// 周选择模式（多选）
					const weekDates = this.getWeekDates(date);
					
					// 判断是否点击了已选中的周
					const clickedWeekStart = weekDates[0];
					const clickedWeekEnd = weekDates[weekDates.length - 1];
					const isClickedWeekInRange = this.time.length === 2 && 
												 clickedWeekStart >= this.time[0] && 
												 clickedWeekEnd <= this.time[1];
					
					// 检查是否是点击已选范围内的周但不是完全相同的周
					if (isClickedWeekInRange && (clickedWeekStart !== this.time[0] || clickedWeekEnd !== this.time[1])) {
						// 如果点击的是范围内的周（但不是完全相同的周），则只选中这一周
						this.time = [clickedWeekStart, clickedWeekEnd];
						console.log('只选中点击的周', this.time);
					} else if (this.singStatus) {
						// 单选模式：选择整周
						this.time = [weekDates[0], weekDates[weekDates.length - 1]];
					} else {
						// 范围选择模式
						// 如果是第一次选择或只有一个选择点
						if (this.time.length === 0) {
							// 第一次选择，直接设置为当前周的时间范围
							this.time = [weekDates[0], weekDates[weekDates.length - 1]];
						} else if (this.time.length === 2) {
							// 已经有一个周被选中，现在选择第二个周
							const firstWeekStart = new Date(this.time[0]);
							const firstWeekEnd = new Date(this.time[1]);
							const secondWeekStart = new Date(weekDates[0]);
							const secondWeekEnd = new Date(weekDates[weekDates.length - 1]);
							
							// 检查是否点击了相同的周，如果是则重新开始选择
							if (this.time[0] === weekDates[0] && this.time[1] === weekDates[weekDates.length - 1]) {
								// 如果点击的是完全相同的周，则重新开始选择
								this.time = [weekDates[0], weekDates[weekDates.length - 1]];
							} else {
								// 检查是否超过两年限制
								const yearDiff = Math.abs(firstWeekStart.getFullYear() - secondWeekStart.getFullYear());
								if (yearDiff > 2 || (yearDiff === 2 && 
									(firstWeekStart.getMonth() > secondWeekStart.getMonth() || 
									(firstWeekStart.getMonth() === secondWeekStart.getMonth() && firstWeekStart.getDate() > secondWeekStart.getDate())))) {
									uni.showToast({
										icon: 'none',
										title: '最多不能超出2年'
									});
									return;
								}
								
								// 根据选择的两个周的位置确定范围的开始和结束
								if (secondWeekStart.getTime() < firstWeekStart.getTime()) {
									// 如果第二次选择的周在第一次选择的周之前
									this.time = [secondWeekStart.getTime(), firstWeekEnd.getTime()];
								} else {
									// 如果第二次选择的周在第一次选择的周之后
									this.time = [firstWeekStart.getTime(), secondWeekEnd.getTime()];
								}
							}
						} else {
							// 如果已经有两个选择点，重新开始选择
							this.time = [weekDates[0], weekDates[weekDates.length - 1]];
						}
					}
				}

				// 更新显示的选择时间
				if (this.time.length > 0) {
					let firstTime = formatTime(this.time[0], '.');
					if (this.time.length === 1) {
						this.selectTime = firstTime;
					} else {
						let endTime = formatTime(this.time[1], '.');
						this.selectTime = firstTime + '-' + endTime;
					}
				} else {
					this.selectTime = '';
				}
				if (this.singStatus) {
					this.$emit('close', this.selectTime, this.model);
				}
			}
		},
		// 初始化，默认为当前年月
		initDate() {
			let month = new Date().getMonth() + 1;
			let year = new Date().getFullYear();
			let day = new Date().getDate();
			this.monthList = [];
			this.yearList = [];
			this.month = month;
			this.year = year;
			this.nowData.month = month;
			this.nowData.year = year;
			this.nowData.day = day;
			// this.getDate(year, month);
			this.loading = true;
			console.log('initDate');
			this.addMonthList(year, 0);
			this.addYearList(year, 0);

			if (this.defTime && this.defTime.length) {
				let arr = [];
				for (var i = 0; i < this.defTime.length; i++) {
					arr.push(new Date(this.defTime[i].replace(/-/g, '/')).getTime());
				}
				this.time = arr;
			}
		},

		confirm() {
			if (!this.selectTime) {
				uni.showToast({
					icon: 'none',
					title: '请选择日期'
				});
			} else {
				// 处理只选中一个月份或年份的情况
				if (this.time.length === 1) {
					const selectedDate = new Date(this.time[0]);
					let endDate;

					if (this.model === 'month') {
						// 如果是月份选择模式，选择整个月
						const year = selectedDate.getFullYear();
						const month = selectedDate.getMonth();
						// 月份的第一天
						const startDate = new Date(year, month, 1);
						// 月份的最后一天
						endDate = new Date(year, month + 1, 0);
						this.time = [startDate.getTime(), endDate.getTime()];
					} else if (this.model === 'year') {
						// 如果是年份选择模式，选择整年
						const year = selectedDate.getFullYear();
						// 年份的第一天
						const startDate = new Date(year, 0, 1);
						// 年份的最后一天
						endDate = new Date(year, 11, 31, 23, 59, 59);
						this.time = [startDate.getTime(), endDate.getTime()];
					}

					// 更新显示的选择时间
					let firstTime = formatTime(this.time[0], '.');
					let endTime = formatTime(this.time[1] || this.time[0], '.');
					this.selectTime = firstTime + '-' + endTime;
				}

				if (this.time.length == 2) {
					// 检查是否超过90天
					// if (this.model === 'date') {
					// 	let differDay = Math.abs(new Date(this.time[0]) - new Date(this.time[1])) / 1000 / 60 / 60 / 24;
					// 	if (differDay > 90) {
					// 		uni.showToast({
					// 			icon: 'none',
					// 			title: '日期选择不能大于90天'
					// 		});
					// 		return;
					// 	}
					// }

					// 检查是否超过2年
					const startDate = new Date(this.time[0]);
					const endDate = new Date(this.time[1]);
					const startYear = startDate.getFullYear();
					const endYear = endDate.getFullYear();

					// 修正：确保年份差不超过1年，或者如果是1年则月份条件也满足（总共不超过2年）
					const yearDiff = endYear - startYear;
					// const monthDiff = endDate.getMonth() - startDate.getMonth();
					// const dayDiff = endDate.getDate() - startDate.getDate();

					// 如果年差大于1，或者等于1但月份和日期使总差值超过2年
					if (yearDiff > 1) {
						uni.showToast({
							icon: 'none',
							title: '最多不能超出2年'
						});
						return;
					}
				}
				// console.log(this.selectTime,'this.selectTime')
				this.$emit('close', this.selectTime, this.model);
			}
		},
		cancel() {
			this.$emit('close');
			// this.$emit('cancle')
		},
		getWeekDates(date) {
			const startOfWeek = new Date(date);
			const dayOfWeek = startOfWeek.getDay();
			if (dayOfWeek !== 0) {
				startOfWeek.setDate(startOfWeek.getDate() - dayOfWeek + 1); // 调整到周一
			} else {
				startOfWeek.setDate(startOfWeek.getDate() - 6); // 如果是周日，调整到上周一
			}

			const weekDates = [];
			for (let i = 0; i < 7; i++) {
				const currentDate = new Date(startOfWeek);
				currentDate.setDate(startOfWeek.getDate() + i);
				weekDates.push(currentDate.getTime());
			}
			return weekDates;
		},
		// 加载年份分页 lag: 0(初始化) 1（下一页） -1(上一页)
		loadYearFuc(lag) {
			let num = this.loadMonth;
			if (lag == 0) {
				this.scrollTopNum = 0;
				// 初始化
				let now = new Date();
				let currentYear = now.getFullYear();
				let list = [];
				let top = 0;

				// 加载前几年
				for (let i = -num; i < 0; i++) {
					let yearItem = {
						id: 'id' + (currentYear + i),
						year: currentYear + i,
						height: 200
					};
					top += yearItem.height;
					list.push(yearItem);
				}

				// 当前年
				list.push({
					id: 'id' + currentYear,
					year: currentYear,
					height: 200
				});

				// 加载后几年
				for (let i = 1; i <= num; i++) {
					list.push({
						id: 'id' + (currentYear + i),
						year: currentYear + i,
						height: 200
					});
				}

				this.yearList = list;
				this.$nextTick(() => {
					this.scrollTopNum = top - 60;
					this.loading = false;
					this.navLoading = false;
				});
				return;
			} else if (lag > 0) {
				// 下一页
				let lastYear = this.yearList[this.yearList.length - 1].year;
				let list = [];
				for (let i = 1; i <= num; i++) {
					list.push({
						id: 'id' + (lastYear + i),
						year: lastYear + i,
						height: 200
					});
				}
				this.yearList.push(...list);
				this.loading = false;
				return;
			} else if (lag < 0) {
				this.scrollTopNum = 0;
				// 上一页
				let firstYear = this.yearList[0].year;
				let top = 0;
				let list = [];
				for (let i = 1; i <= num; i++) {
					let yearItem = {
						id: 'id' + (firstYear - i),
						year: firstYear - i,
						height: 200
					};
					top += yearItem.height;
					list.unshift(yearItem);
				}
				this.yearList.unshift(...list);
				this.$nextTick(() => {
					this.scrollTopNum = top;
					this.navLoading = false;
				});
				return;
			}
			this.loading = false;
		},
		// 获取年份数组
		addYearList(year, yearIndex) {
			console.log('/获取年份数组');
			this.loadYearFuc(yearIndex);
			return;
		},
		// 处理月份点击事件
		handleMonthClick(month, yearData) {
			const year = yearData.year;

			// 检查是否符合日期限制条件
			const now = new Date();
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

			if (this.beforeToday && !this.atterToday) {
				// 只能选择今天之前的日期
				if (new Date(year, month - 1, 1) > today) {
					uni.showToast({
						title: '请选择今天以前的月份',
						icon: 'none'
					});
					return;
				}
			} else if (!this.beforeToday && this.atterToday) {
				// 只能选择今天之后的日期
				if (new Date(year, month, 0) < today) {
					uni.showToast({
						title: '请选择今天以后的月份',
						icon: 'none'
					});
					return;
				}
			}

			// 检查是否点击了相同的月份（切换单选/范围选择）
			const isSameMonth = this.time.length > 0 &&
				new Date(this.time[0]).getFullYear() === year &&
				new Date(this.time[0]).getMonth() === month - 1;

			// 范围选择
			if (this.singStatus) {
				// 单选模式：选择当前月完整范围
				const startDate = new Date(year, month - 1, 1); // 月初
				const endDate = new Date(year, month, 0); // 月末
				this.time = [startDate.getTime(), endDate.getTime()];
			} else if (isSameMonth && this.time.length === 1) {
				// 如果点击了相同的月份并且只有一个时间点，转换为该月的完整范围
				const startDate = new Date(year, month - 1, 1); // 月初
				const endDate = new Date(year, month, 0); // 月末
				this.time = [startDate.getTime(), endDate.getTime()];
			} else {
				// 范围选择
				if (this.time.length === 0 || this.time.length === 2) {
					// 如果当前没有选择，或者已经选了一个范围，开始新的选择
					const startDate = new Date(year, month - 1, 1); // 月初
					this.time = [startDate.getTime()];
				} else if (this.time.length === 1) {
					// 检查是否超过24个月的限制
					const firstDate = new Date(this.time[0]);
					const firstYear = firstDate.getFullYear();
					const firstMonth = firstDate.getMonth() + 1;

					// 计算月份差
					const monthDiff = Math.abs((year - firstYear) * 12 + (month - firstMonth));
					if (monthDiff > 23) { // 最多23个月差值(总计24个月 = 2年)
						uni.showToast({
							title: '最多不能超出24个月',
							icon: 'none'
						});
						return;
					}

					// 确定哪个月在前，哪个月在后
					let startYear, startMonth, endYear, endMonth;

					// 计算哪个日期在前
					if (year < firstYear || (year === firstYear && month < firstMonth)) {
						// 新选择的月份在前
						startYear = year;
						startMonth = month;
						endYear = firstYear;
						endMonth = firstMonth;
					} else {
						// 第一次选择的月份在前
						startYear = firstYear;
						startMonth = firstMonth;
						endYear = year;
						endMonth = month;
					}

					// 设置为月初和月末
					const startDate = new Date(startYear, startMonth - 1, 1); // 第一个月的月初
					const endDate = new Date(endYear, endMonth, 0); // 第二个月的月末

					this.time = [startDate.getTime(), endDate.getTime()];
				}
			}

			// 更新显示的选择时间
			if (this.time.length > 0) {
				let firstTime = formatTime(this.time[0], '.');
				if (this.time.length === 1) {
					this.selectTime = firstTime;
				} else {
					let endTime = formatTime(this.time[1], '.');
					this.selectTime = firstTime + '-' + endTime;
				}
			} else {
				this.selectTime = '';
			}

			// 单选模式自动关闭
			if (this.singStatus) {
				this.$emit('close', this.selectTime, this.model);
			}
		},

		// 判断月份是否被选中（作为范围的起始或结束点）
		isMonthActive(month, yearData) {
			if (this.time.length === 0) return false;

			const year = yearData.year;

			// 如果只有一个选择点，直接比较
			if (this.time.length === 1) {
				const selectedDate = new Date(this.time[0]);
				return selectedDate.getFullYear() === year &&
					selectedDate.getMonth() === month - 1;
			}

			// 检查是否是范围的起始或结束点
			const startDate = new Date(this.time[0]);
			const endDate = new Date(this.time[1]);

			const isStartMonth = year === startDate.getFullYear() && month === startDate.getMonth() + 1;
			const isEndMonth = year === endDate.getFullYear() && month === endDate.getMonth() + 1;

			return isStartMonth || isEndMonth;
		},

		// 判断月份是否在选择范围内（不是起始或结束点）
		isMonthInRange(month, yearData) {
			if (this.time.length < 2) return false;

			const year = yearData.year;

			// 范围选择：检查该月是否在选择范围内但不是起始或结束点
			const startDate = new Date(this.time[0]);
			const endDate = new Date(this.time[1]);

			// 如果是起始或结束月份，不算在范围内
			const isStartMonth = year === startDate.getFullYear() && month === startDate.getMonth() + 1;
			const isEndMonth = year === endDate.getFullYear() && month === endDate.getMonth() + 1;
			if (isStartMonth || isEndMonth) return false;

			// 将年月转换为可比较的数值
			const currentYearMonth = year * 100 + month;
			const startYearMonth = startDate.getFullYear() * 100 + (startDate.getMonth() + 1);
			const endYearMonth = endDate.getFullYear() * 100 + (endDate.getMonth() + 1);

			// 检查是否在范围内
			return currentYearMonth > startYearMonth && currentYearMonth < endYearMonth;
		},

		// 判断年份是否被选中（作为范围的起始或结束点）
		isYearActive(year) {
			if (this.time.length === 0) return false;

			// 如果只有一个选择点，直接比较
			if (this.time.length === 1) {
				const selectedDate = new Date(this.time[0]);
				return selectedDate.getFullYear() === year;
			}

			// 检查是否是范围的起始或结束点
			const startYear = new Date(this.time[0]).getFullYear();
			const endYear = new Date(this.time[1]).getFullYear();

			return year === startYear || year === endYear;
		},

		// 判断年份是否在选择范围内（不是起始或结束点）
		isYearInRange(year) {
			if (this.time.length < 2) return false;

			// 范围选择：检查该年是否在选择范围内但不是起始或结束点
			const startYear = new Date(this.time[0]).getFullYear();
			const endYear = new Date(this.time[1]).getFullYear();

			return year > startYear && year < endYear;
		},

		// 判断月份是否是起始月份
		isMonthStartActive(month, yearData) {
			if (this.time.length < 2) return false;

			const year = yearData.year;
			const startDate = new Date(this.time[0]);

			return year === startDate.getFullYear() && month === startDate.getMonth() + 1;
		},

		// 判断月份是范围的开始还是结束，用于控制背景位置
		isMonthRangeActive(month, yearData) {
			if (this.time.length < 2) return 0;

			const year = yearData.year;
			const startDate = new Date(this.time[0]);
			const endDate = new Date(this.time[1]);

			// 如果是开始月份，返回1（对应数组索引1，即'left:0;'）
			if (year === startDate.getFullYear() && month === startDate.getMonth() + 1) {
				return 0;
			}
			// 如果是结束月份，返回0（对应数组索引0，即'right:0;'）
			if (year === endDate.getFullYear() && month === endDate.getMonth() + 1) {
				return 1;
			}

			// 默认返回右边样式
			return 0;
		},

		// 判断是否是同一月份的选中状态
		isSameMonthSelected() {
			if (this.time.length < 2) return false;
			const firstDate = new Date(this.time[0]);
			const secondDate = new Date(this.time[1]);
			return firstDate.getFullYear() === secondDate.getFullYear() &&
				firstDate.getMonth() === secondDate.getMonth();
		},

		// 处理年份点击事件
		handleYearClick(year) {
			// 检查是否符合日期限制条件
			const now = new Date();
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

			if (this.beforeToday && !this.atterToday) {
				// 只能选择今天之前的日期
				if (new Date(year, 0, 1) > today) {
					uni.showToast({
						title: '请选择今天以前的年份',
						icon: 'none'
					});
					return;
				}
			} else if (!this.beforeToday && this.atterToday) {
				// 只能选择今天之后的日期
				if (new Date(year, 11, 31, 23, 59, 59) < today) {
					uni.showToast({
						title: '请选择今天以后的年份',
						icon: 'none'
					});
					return;
				}
			}

			// 检查是否点击了相同的年份（切换单选/范围选择）
			const isSameYear = this.time.length > 0 &&
				new Date(this.time[0]).getFullYear() === year;

			if (this.singStatus) {
				// 单选模式：选择当前年完整范围
				const startDate = new Date(year, 0, 1); // 年初1月1日
				const endDate = new Date(year, 11, 31, 23, 59, 59); // 年末12月31日
				this.time = [startDate.getTime(), endDate.getTime()];
			} else if (isSameYear && this.time.length === 1) {
				// 如果点击了相同的年份并且只有一个时间点，转换为该年的完整范围
				const startDate = new Date(year, 0, 1); // 年初1月1日
				const endDate = new Date(year, 11, 31, 23, 59, 59); // 年末12月31日
				this.time = [startDate.getTime(), endDate.getTime()];
			} else {
				// 范围选择
				if (this.time.length === 0 || this.time.length === 2) {
					// 如果当前没有选择，或者已经选了一个范围，开始新的选择
					const startDate = new Date(year, 0, 1); // 年初1月1日
					this.time = [startDate.getTime()];
				} else if (this.time.length === 1) {
					// 检查是否超过2年的限制
					const firstYear = new Date(this.time[0]).getFullYear();

					// 修正：确保两年之间的差值不超过1（即最多相隔一年，总计为2年）
					if (Math.abs(year - firstYear) > 1) {
						uni.showToast({
							title: '最多不能超出2年',
							icon: 'none'
						});
						return;
					}

					// 确定哪个年份在前，哪个年份在后
					let startYear, endYear;
					
					// 计算哪个日期在前
					if (year < firstYear) {
						// 新选择的年份在前
						startYear = year;
						endYear = firstYear;
					} else {
						// 第一次选择的年份在前
						startYear = firstYear;
						endYear = year;
					}
					
					// 设置为年初和年末
					const startDate = new Date(startYear, 0, 1); // 第一个年的年初(1月1日)
					const endDate = new Date(endYear, 11, 31, 23, 59, 59); // 第二个年的年末(12月31日)
					
					this.time = [startDate.getTime(), endDate.getTime()];
				}
			}

			// 更新显示的选择时间
			this.updateSelectTimeDisplay();

			// 单选模式自动关闭
			if (this.singStatus) {
				this.$emit('close', this.selectTime, this.model);
			}
		},
		// 新增：处理默认选中时间的方法
		handleDefaultSelectTime(timeArray) {
			if (!timeArray || timeArray.length !== 2) return;

			const [startStr, endStr] = timeArray;
			const startDate = new Date(startStr.replace(/-/g, '/'));
			const endDate = new Date(endStr.replace(/-/g, '/'));

			// 检查两个时间是否相同
			const isSameTime = startStr === endStr || startDate.getTime() === endDate.getTime();

			// 根据不同的模式处理时间范围
			if (this.model === 'date' || this.model === 'week') {
				// 日期和周模式
				if (isSameTime) {
					// 两个时间相同时，只使用一个时间
					this.time = [startDate.getTime()];
				} else {
					// 时间不同时，使用时间范围
					this.time = [startDate.getTime(), endDate.getTime()];
				}
			} else if (this.model === 'month') {
				// 月份模式
				const startMonth = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
				const endMonth = new Date(endDate.getFullYear(), endDate.getMonth() + 1, 0);

				// 检查是否是同一个月
				const isSameMonth = startDate.getFullYear() === endDate.getFullYear() &&
									 startDate.getMonth() === endDate.getMonth();

				if (isSameTime || isSameMonth) {
					// 相同月份，只使用一个时间
					this.time = [startMonth.getTime()];
				} else {
					// 不同月份，使用时间范围
					this.time = [startMonth.getTime(), endMonth.getTime()];
				}
			} else if (this.model === 'year') {
				// 年份模式
				const startYear = new Date(startDate.getFullYear(), 0, 1);
				const endYear = new Date(endDate.getFullYear(), 11, 31, 23, 59, 59);

				// 检查是否是同一年
				const isSameYear = startDate.getFullYear() === endDate.getFullYear();

				if (isSameTime || isSameYear) {
					// 相同年份，只使用一个时间
					this.time = [startYear.getTime()];
				} else {
					// 不同年份，使用时间范围
					this.time = [startYear.getTime(), endYear.getTime()];
				}
			}

			// 更新显示的选择时间
			this.updateSelectTimeDisplay();
		},
		// 新增：更新显示的选择时间的方法
		updateSelectTimeDisplay() {
			if (this.time.length > 0) {
				let firstTime = formatTime(this.time[0], '.');
				if (this.time.length === 1) {
					this.selectTime = firstTime;
				} else {
					let endTime = formatTime(this.time[1], '.');
					this.selectTime = firstTime + '-' + endTime;
				}
			} else {
				this.selectTime = '';
			}
		},
		resSet() {
			this.selectTime = '';
			this.time = [];
			this.show = false;
		},
		// 判断是否是当前月份
		isCurrentMonth(month, yearData) {
			const currentDate = new Date();
			return yearData.year === currentDate.getFullYear() && month === currentDate.getMonth() + 1;
		},

		// 判断是否是当前年份
		isCurrentYear(year) {
			return year === new Date().getFullYear();
		},
	}
};
</script>

<style lang="scss" scoped>
@keyframes eject {
  0% {
    transform: translateY(1040rpx);
  }

  100% {
    transform: translateY(0);
  }
}

@mixin midPosition {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

@mixin column {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  position: relative;
  padding: 0 7rpx;
}

@mixin footer {
  width: 50%;
  height: 73rpx;
  font-size: 28rpx;
  align-items: center;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: bold;
  text-align: center;
  line-height: 40rpx;
  position: relative;
}

.img {
  width: 36rpx;
  height: 36rpx;
}

.flex-view {
  display: flex;
  height: fit-content;
  width: fit-content;
}

.mask {
  width: 100%;
  height: 100%;
  // @include midPosition background: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.17);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 550;
}

.time_select {
  width: 750rpx;
  height: 1040rpx;
  animation: eject 0.3s;
  background: #ffffff;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
  position: fixed;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 600;

  &-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;

    .head-line {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  &-body {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 68rpx;
    background: #f5fbff;
    margin: auto;
    align-items: center;

    view {
      color: #0091ff;
      font-weight: bold;
    }
  }

  &-container {
    width: 100%;
    height: calc(100% - 150rpx - 90rpx - 130rpx - 70rpx);
  }
}

.titles {
  width: calc(100% - 80rpx);
  padding: 0 40rpx;
  height: 90rpx;

  &-text {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    padding-bottom: 8rpx;
  }

  &-choose {
    font-size: 28rpx;
    color: #666;

    text {
      color: #333333;
    }
  }
}

.month-index {
  color: #333333;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
}

.month-item {
  width: 100%;
  display: flex;
  padding: 20rpx 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 28rpx;
  color: #666666;
  .date-list {
    width: calc(100% - 40rpx);
    padding-top: 15rpx;
  }
}

.date-head {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .weeks {
    width: calc(100% - 40rpx);
    padding: 0 20rpx;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(162, 162, 162, 0.19);
    display: flex;
    justify-content: space-around;
    font-size: 24rpx;
    font-weight: 400;
    text-align: center;
    color: #999999;

    &-item {
      flex: 1;
      padding: 10rpx 0;
    }
  }
}

.date-column {
  flex: 1;
  @include column;

  &-date {
    @include midPosition;
    width: fit-content;
    height: fit-content;
  }

  &-active {
    @include column;
    background: #def1ff;

    &-date {
      // @include midPosition
      border-radius: 50rpx;
      background: #0091ff;
      color: #ffffff;
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      top: 0;

      text {
        width: fit-content;
        height: fit-content;
        @include midPosition;
      }
    }
  }

  &-colors {
    color: #ccc;
  }
}

.date-column-include {
  flex: 1;
  width: 80rpx;
  height: 80rpx;
  position: relative;
  padding: 0 7rpx;
  background: #def1ff;
  color: #666666;

  &-date {
    @include midPosition;
    width: fit-content;
    height: fit-content;
  }
}

.date-column-include-week {
  flex: 1;
  width: 80rpx;
  height: 80rpx;
  position: relative;
  padding: 0 7rpx;
  background: #0091ff;
  color: #ffffff;

  &:first-child {
    border-top-left-radius: 80rpx;
    border-bottom-left-radius: 80rpx;
  }

  &:last-child {
    border-top-right-radius: 80rpx;
    border-bottom-right-radius: 80rpx;
  }

  &-date {
    @include midPosition;
    width: fit-content;
    height: fit-content;
  }
}

.loading {
  text-align: center;
  color: #999;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  padding: 15rpx 0;
  transition: .1s all;

}

.right {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #def1ff;
}

.btns {
  width: 750rpx;
  height: 128rpx;
  background: #ffffff;
  border-top: 2rpx solid rgba(0, 0, 0, 0.19);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;

  &-item {
    width: 670rpx;
    height: 70rpx;
    background: #f5fbff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #0091ff;
    border-radius: 0rpx 8rpx 8rpx 0rpx;
  }

  &-item:last-child {
    background-color: #0091ff;
    color: #fff;
    border-radius: 0rpx 8rpx 8rpx 0rpx;
  }
}

.model-list {
  display: flex;
  background: #F3F6F8;
  border-radius: 8rpx;
  width: 90%;
  padding: 6rpx;
  margin: 16rpx auto;
  //&>.model-item:nth-child(1):after{
  //  content: "";
  //  display: block;
  //  height: 100%;
  //  border-right: 2rpx solid #D8D8D8;
  //}
  .model-item {
    flex: 1;
    height: 48rpx;
    color: #666666;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .active {
    background-color: #FFFFFF;
    border: 0 !important;
  }
}

.month-list {
  display: flex;
  flex-wrap: wrap;
}

.month-list-item {
  position: relative;
  flex: 0 0 25%;
  display: flex;
  justify-content: center;
  align-items: center;

  .month-item-text {
    z-index: 2;
    border-radius: 40rpx;
    width: 128rpx;
    height: 72rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24rpx auto;
    color: #666666;
  }
}

.active-month-item, .active-year-item {
  background-color: #0091ff;
  color: #FFFFFF !important;
}

.current-month, .current-year {
  color: #ff5500 !important;
}

// 范围选择样式
.month-in-range {
  background-color: #e5f3ff !important;
  width: 100% !important;
  border-radius: 0 !important;
}

.year-in-range {
  background-color: #e5f3ff !important;
}

.year-list {
  padding: 20rpx 0;
}

.year-list-item {
  flex: 0 0 33.33%;
  margin-bottom: 20rpx;
}

.year-item-text {
  width: 70%;
}

.year-in-range {
  background-color: #e5f3ff !important;
}

.bg_active {
  background-color: #0091ff;
}

.month-right, .year-right {
  width: 50%;
  height: 72rpx;
  margin: auto 0;
  position: absolute;
  background: #e5f3ff;
}

.year-right {
  z-index: -1;
  position: absolute;
  top: 0;
}

.year-list-item {
  position: relative;
}

// 范围内的月份样式（不是开始和结束点）
.month-list-item .month-item-text.active-month-item {
  background-color: #0091ff;
  color: #FFFFFF !important;
}

// 年份选择样式
.year-list-item .month-item-text.active-year-item {
  background-color: #0091ff;
  color: #FFFFFF !important;
}
</style>
